<template>
	<Layout>
		<div ref="mainContainer" class="main-container" v-loading="isLoading">
			<BlogDetail :blog="datas" v-if="datas" />
			<BlogComments v-if="!isLoading" />
		</div>
		<template #right>
			<div class="right-container" v-loading="isLoading">
				<BlogTOC :toc="datas.toc" v-if="datas" />
			</div>
		</template>
	</Layout>
</template>

<script>
import Layout from "@/components/Layout";
import fetchDatas from "@/mixins/fetchDatas";
import { getoneBlog } from "@/api/getBlog";
import BlogDetail from "./components/BlogDetail.vue";
import BlogTOC from "./components/BlogTOC";
import BlogComments from "./components/BlogComments.vue";
import mainScroll from "@/mixins/mainScroll";
import { setTitle } from "@/utils";

export default {
	mixins: [fetchDatas(null), mainScroll("mainContainer")],
	components: {
		Layout,
		BlogDetail,
		BlogTOC,
		BlogComments,
	},
	methods: {
		async fetchData() {
			const resp = await getoneBlog(this.$route.params.blogId);
			// //如果文章不存在
			if (!resp) {
				//跳转到404页面
				this.$router.push("/404");
				return;
			}
			if (resp.title) {
				setTitle.setrouterTitle(resp.title);
			}
			return resp;
		},
	},

	updated() {
		//刷新后会跳转到hash值位置，但当时还没有dom,但等dom加载完之后已经刷新过了。所以没有跳转
		//刷新后先保存hash,待数据渲染后再进行加载
		const hash = location.hash;
		location.hash = "";
		setTimeout(() => {
			location.hash = hash;
		}, 50);
	},
};
</script>

<style scoped lang="less">
.main-container {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 20px;
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
.right-container {
	width: 300px;
	height: 100%;
	position: relative;
	padding: 20px;
	overflow-y: scroll;
}
</style>
